<template>
  <div>
    <my-head>
    </my-head>

    <div>
      <el-row   style="width:80%;margin-left: 8%;margin-top: 5%">

        <el-card v-for="(order,index) in order" :key="order">
          <div slot="header" class="clearfix" style="margin-right: 60%">
            <span style="font-size: 25px">确认订单信息</span>
            <span style="font-size: 15px"> 请在2小时内完成支付，否则订单会被自动取消</span>
          </div>

          <el-row style="width: 10%">
            <h3>购买课程</h3>
          </el-row>
          <el-row v-for="(orderDetail,index) in order.qfOrderDetails" :label="course" :key="index" style="margin-top: 10px">
            <el-col :span="3" style="width: 50%">
              <el-card :body-style="{ padding: '1px' }">
                <img style="width: 100%;height: 250px"  :src="orderDetail.qfCourse.coursePic" class="image">
              </el-card>
            </el-col>
            <el-col :span="10" style="width: 50%">
              <el-card :body-style="{ padding: '1px' }">
                <div slot="header" class="clearfix">
                  <span style="font-size: 18px">{{orderDetail.qfCourse.courseName}}</span>
                </div>
                <el-row>
                  <el-col style="width: 20%">
                    评分：
                  </el-col>
                  <el-col style="width: 50%">

                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                    </el-rate>
                  </el-col>
                </el-row>

                <el-row style="margin-top: 63px">
                  <el-col style="width: 20%">
                    价格
                  </el-col>
                  <el-col style="width: 50%">
                    ￥{{orderDetail.qfCourse.pay}}
                  </el-col>
                </el-row>
                <el-row style="margin-top: 63px">
                  <el-col style="width: 20%">
                    类型
                  </el-col>
                  <el-col style="width: 50%">
                    永久可看
                  </el-col>
                </el-row>

              </el-card>
            </el-col>
          </el-row>

          <el-button @click="alipay(order.orderid)" type="success">点击支付</el-button>
          <el-button @click="cancelPay(order.orderid)" type="danger">取消支付</el-button>
        </el-card>
      </el-row>

      <div v-html="alipayWap" ref="alipayWap"></div>
    </div>

    <my-footer>
    </my-footer>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "",
    data(){
      return{
        user:{},
        value: 5,
        order:[],
        payReq:{},
        alipayWap:""

      }
    },
    methods:{
      //根据课程id查询课程详细信息
      findCourseById:function () {
        this.$axios.get("/order/findOrderByUserId").then(res=>{
          if (res.data.code==0){

            this.order = res.data.data;

          }
        })
      },
      findUserByToken(){
        this.$axios.post("/user/findUserByToken").then(res => {
          console.log(res.data)
          this.validate = res.data.code==0;
          if (res.data.code==0) {

            this.user = res.data.data;
            console.log(this.user)
          }
          if (res.data.code == 1) {
            this.$router.push("/").catch(data => {  })
          }
        })
      },
      cancelPay(orderid){
        this.$axios.post("/order/cancelPay",{orderid:orderid}).then(res=>{
          if (res.data.code==0){
            const h = this.$createElement;
            this.$message({
              message: h('p', null, [
                h('span', null, '取消订单 '),
                h('i', { style: 'color: teal' }, '成功')
              ])
            });
            this.findCourseById();
          }else{
            const h = this.$createElement;
            this.$message({
              message: h('p', null, [
                h('span', null, '取消订单 '),
                h('i', { style: 'color: teal' }, '失败')
              ])
            });
          }
        })
      },
      alipay(orderid){
        this.$axios.post("/pay/alipay",{orderid:orderid}).then(res=>{
          //console.log()
          this.alipayWap = res.data.data;
          console.log(res.data.data)
          //前台发起请求
          this.$nextTick(() => {
            this.$refs.alipayWap.children[0].submit()
          })
        })
      }
    },
    mounted(){
      //this.id = this.$route.params.productid;
      // this.findUserByToken();
      this.findCourseById();
    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
  code {
    font-family: monospace;
  }
</style>
